/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/


//
// Configuration
//

$font-size: 16px;       // Your base font-size in pixels
$em: $font-size / 1em;  // Shorthand for outputting ems

$column: 60px;  // The column-width of your grid in pixels
$gutter: 20px;  // The gutter-width of your grid in pixels



//
// Column-widths in variables, in ems
//

$cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
$cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
$cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
$cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
$cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
$cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
$cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
$cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
$cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;

//
// Column-widths in a function, in ems
//

@mixin width ($cols: 1) {
    width: ($cols * ($column + $gutter) - $gutter) / $em;
}

$desktop: 942px;
$tablet: 640px;
$mobile: 480px;

//4 columns
@media only screen and (max-width: $mobile - 1) {
    #view {
        text-align: center;
    }

    .inner {
        margin: 0 auto;
        width: 100%;
    }
}

//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
    #view {
        text-align: center;
    }

    .inner {
        margin: 0 auto;
        width: $mobile;
    }
}

//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
    #view {
        text-align: center;
    }

    .inner {
        margin: 0 auto;
        width: $tablet;
    }
}

//12 columns
@media only screen and (min-width: $desktop) {
    .inner {
        margin: 0 auto;
        width: $desktop;
    }
}
